<template>
	<div class="page-operation">
		<div class="page-header">
			<div class="header-line line1">
				<span class="page-title">
					运营计划看板
				</span>
				<el-radio-group class="page-view-button" v-model="pageview">
					<el-radio-button :label='1'><i class="el-icon-menu"></i></el-radio-button>
					<el-radio-button :label='2'><i class="el-icon-s-operation"></i></el-radio-button>
				</el-radio-group>
			</div>
			<div class="header-line line2" v-if="pageview == 1">
				<div class="select-box">
					<span>选择状态</span>
					<el-checkbox-group v-model="checkStatus">
						<el-checkbox label="运行中"></el-checkbox>
						<el-checkbox label="暂停中"></el-checkbox>
						<el-checkbox label="待审批"></el-checkbox>
						<el-checkbox label="已结束"></el-checkbox>
					</el-checkbox-group>
				</div>
				<div class="search-bar">
					<el-input v-model="searchvalue" placeholder='搜索计划名称或ID' size='small'></el-input>
					<el-button icon="el-icon-plus" size="medium" type="primary" class="create-btn"
						@click='chooseTriggerTypeVisible = true'>创建计划</el-button>
				</div>
			</div>
			<div class="header-line line2" v-if="pageview == 2">
				<div class="select-box-selector">
					<div class="selector">
						<span class="selector-title">计划类型</span>
						<el-select v-model="queryForm.value1" placeholder="请选择" class='selector--choose'>
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
								:disabled="item.disabled">
							</el-option>
						</el-select>
					</div>
					<div class="selector">
						<span class="selector-title">创建人</span>
						<el-select v-model="queryForm.value2" placeholder="请选择" class='selector--choose'>
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
								:disabled="item.disabled">
							</el-option>
						</el-select>
					</div>
					<div class="selector">
						<span class="selector-title">触达通道</span>
						<el-select v-model="queryForm.value3" placeholder="请选择" class='selector--choose'>
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
								:disabled="item.disabled">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="search-bar">
					<el-input v-model="searchvalue" placeholder='搜索计划名称或ID' size='small'></el-input>
					<el-button icon="el-icon-plus" size="medium" type="primary" class="create-btn"
					@click='chooseTriggerTypeVisible = true'>创建计划</el-button>
				</div>
			</div>
		</div>

		<div class="bar-view" v-if="pageview == 1">
			<div class="group-box" v-for="(item , index) in groupList" :key='index'>
				<div class="group">
					<div class="group-header">
						<span>组件名称</span>
						<i class="el-icon-more"></i>
					</div>
					<div class="group-body">
						<template v-for="(plan , index) in item">
							<plan :plan="plan"></plan>

						</template>
					</div>
					<div class="group-footer" @click='chooseTriggerTypeVisible = true'>
						<span><i class="el-icon-plus"></i></span>
						<span>创建计划</span>
					</div>
				</div>
			</div>
		</div>

		<div class="table-view" v-if="pageview == 2">
			<div class="selector-bigone">
				<div class="selector-item active">
					<div class="icon-title">
						<i class="el-icon-document-checked" style="color: #52BAD3;"></i>
						<span>全部</span>
					</div>
					<div class="selector-count">
						528
					</div>
				</div>
				<div class="selector-item">
					<div class="icon-title">
						<i class="el-icon-success" style="color: #4C84FF;"></i>
						<span>运行中</span>
					</div>
					<div class="selector-count">
						528
					</div>
				</div>
				<div class="selector-item">
					<div class="icon-title">
						<i class="el-icon-video-pause" style="color: #FFB64C;"></i>
						<span>暂停中</span>
					</div>
					<div class="selector-count">
						528
					</div>
				</div>
				<div class="selector-item">
					<div class="icon-title">
						<i class="el-icon-s-custom" style="color: #15C96D;"></i>
						<span>待审批</span>
					</div>
					<div class="selector-count">
						528
					</div>
				</div>
				<div class="selector-item">
					<div class="icon-title">
						<i class="el-icon-remove" style="color: #99A9BF;"></i>
						<span>已结束</span>
					</div>
					<div class="selector-count">
						528
					</div>
				</div>
			</div>
			<div class="table">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="date" label="计划ID" width="100">
					</el-table-column>
					<el-table-column prop="name" label="状态/名称/起止日期" width="">
					</el-table-column>
					<el-table-column prop="name" label="类型" width="">
					</el-table-column>
					<el-table-column prop="address" label="触达通道" width="">
					</el-table-column>
					<el-table-column prop="address" label="最近一次(天)计划触发/目标完成率" width="">
					</el-table-column>
					<el-table-column prop="address" label="整体目标完成率" width="">
					</el-table-column>
					<el-table-column prop="address" label="操作" width="150">
					</el-table-column>
				</el-table>
			</div>
		</div>

		<el-dialog class="triggerTypeBox" :visible.sync="chooseTriggerTypeVisible" width="940px">
			<div class="triggerBody">
				<div class="submenu">
					<p class="submenu-title">选择运营计划触达方式</p>
					<div class="menu-items">
						<div class="menu-item" :class="{active: triggerTypeIndex == 0}" @click="handleChoosenTriggerType(0)">
							<div class="main-trigger">
								<i class="el-icon-set-up"></i>
								<span>短信触达</span>
							</div>
							<!-- <a href="">前往设置</a> -->
						</div>
						<div class="menu-item" :class="{active: triggerTypeIndex == 1}" @click="handleChoosenTriggerType(1)">
							<div class="main-trigger">
								<i class="el-icon-set-up"></i>
								<span>APP 推送触达</span>
							</div>

						</div>
						<div class="menu-item" :class="{active: triggerTypeIndex == 2}" @click="handleChoosenTriggerType(2)">
							<div class="main-trigger">
								<i class="el-icon-set-up"></i>
								<span>Webhook 触达</span>
							</div>

						</div>

					</div>
				</div>

				<div class="submenu">
					<p class="submenu-title">微信触达</p>
					<div class="menu-items">
						<div class="menu-item" :class="{active: triggerTypeIndex == 3}" @click="handleChoosenTriggerType(3)">
							<div class="main-trigger">
								<i class="el-icon-set-up"></i>
								<span>服务号模板消息</span>
							</div>

						</div>
						<div class="menu-item" :class="{active: triggerTypeIndex == 4}" @click="handleChoosenTriggerType(4)">
							<div class="main-trigger">
								<i class="el-icon-set-up"></i>
								<span>48小时活跃推送</span>
							</div>

						</div>
						<div class="menu-item" :class="{active: triggerTypeIndex == 5}" @click="handleChoosenTriggerType(5)">
							<div class="main-trigger">
								<i class="el-icon-set-up"></i>
								<span>公众号群发</span>
							</div>

						</div>

					</div>
				</div>

				<div class="submenu">
					<p class="submenu-title">弹窗触达</p>
					<div class="menu-items">
						<div class="menu-item" :class="{active: triggerTypeIndex == 6}" @click="handleChoosenTriggerType(6)">
							<div class="main-trigger">
								<i class="el-icon-set-up"></i>
								<div>
									<p>App 内弹窗</p>
									<p>IOS、Android</p>
								</div>
							</div>

						</div>
						<div class="menu-item" :class="{active: triggerTypeIndex == 7}" @click="handleChoosenTriggerType(7)">
							<div class="main-trigger">
								<i class="el-icon-set-up"></i>
								<div>
									<p>项目小程序弹窗</p>
									<p>项目尚未上报事件</p>
								</div>
							</div>

						</div>
						<div class="menu-item" :class="{active: triggerTypeIndex == 8}" @click="handleChoosenTriggerType(8)">
							<div class="main-trigger">
								<i class="el-icon-set-up"></i>
								<div>
									<p>H5弹窗</p>
									<p>以手机或平板浏览器为载体</p>
								</div>
							</div>

						</div>
						<div class="menu-item" :class="{active: triggerTypeIndex == 9}" @click="handleChoosenTriggerType(9)">
							<div class="main-trigger">
								<i class="el-icon-set-up"></i>
								<div>
									<p>自定义</p>
									<p>实现任意弹出组件或动作</p>
								</div>
							</div>

						</div>

					</div>
				</div>

			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="chooseTriggerTypeVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleAdd">创建</el-button>
			</span>
		</el-dialog>

		<!-- 添加或修改运营计划对话框 -->
		<createPlan ref='createPlan' v-if='createPlanVisible' :triggerTypeIndex='triggerTypeIndex'></createPlan>

	</div>
</template>
<style>

</style>
<script>
	import {
		listPlan,
		getPlan,
		delPlan,
		addPlan,
		updatePlan,
		exportPlan,
		getChannels,
		getUserTags,
		getChannTemplates
	} from "@/api/operate/plans";
	import {
		listUser
	} from "@/api/system/user";
	import Link from "@/layout/components/Sidebar/Link";
	import plan from './plan.vue'
	import createPlan from './createPlan.vue'
	import {getTriggerType} from './utils.js'
	console.log(getTriggerType)
	export default {
		name: "operate",
		components: {
			Link,
			plan,
			createPlan
		},
		data() {
			return {
				queryForm: {
					value1: null,
					value2: null,
					value3: null,
				},
				triggerTypeIndex: 0,
				options: [],
				pageview: 1,
				tableData: [],
				searchvalue: '',
				checkStatus: [],
				chooseTriggerTypeVisible: false,
				createPlanVisible: false,
				open: false,
				groupList: [
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
					[1, 2, 3, 4, 5, 6, 7, 8, 9],
				],
				selectorForm: {
					value1: '',
					value2: '',
					value3: '',
				},

				active: 1,
				typeValue: "1",
				userTagsId: undefined,
				currentDays: [],
				channelValue: undefined,
				finshStatus: 'success',
				dialogVisible: false,
				selectLength: 0,
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				userIds: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 总条数
				total: 0,
				userTotal: 0,
				// 运营计划表格数据
				templateRadio: undefined,
				planList: [],
				//受众用户
				userTypeValue: "1",
				userList: [],
				// 弹出层标题
				title: "",
				dateRange: "",
				// 是否显示弹出层
				// 状态字典
				templateTotal: 0,
				statusOptions: [],
				templateOptions: [],
				// 类型字典
				typeOptions: [],
				// 通道字典
				channelOptions: [],
				// 创建人字典
				createByOptions: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					name: undefined,
					status: undefined,
					beginDate: undefined,
					endDate: undefined,
					type: undefined,
					channel: undefined,
					latest: undefined,
					completePercent: undefined,
					allPercent: undefined,
					createBy: undefined,
				},
				// 表单参数
				form: {
					type: '1',
					touchType: '1',
					ruleTypes: [{
						name: '1111'
					}, {
						name: '1111'
					}]
				},
				ruleTypes1: [''],
				ruleTypes2: [''],
				ruleTypes3: [''],
				ruleTypes4: [''],
				ruleTypes5: [''],
				ruleTypes6: [''],
				// 表单校验
				rules: {
					name: [{
						required: true,
						message: "名称不能为空",
						trigger: "blur"
					}],
					channel: [{
						required: true,
						message: "触达通道为空",
						trigger: "blur"
					}],
					status: [{
						required: true,
						message: "状态不能为空",
						trigger: "blur"
					}],
					beginDate: [{
						required: true,
						message: "开始时间不能为空",
						trigger: "blur"
					}],
					endDate: [{
						required: true,
						message: "接收时间不能为空",
						trigger: "blur"
					}],
				}
			};
		},
		computed:{
			triggerType() {
				console.log(getTriggerType)
				return ''
				// return getTriggerType(this.triggerTypeIndex)
			},
		},

		created() {
			this.getList();
			this.getChannelsTemplate();
			this.getUserSelectTags();
			this.getCurrentMonthDays();
			this.getSelectChannels();
			this.getDicts("sys_plan_status").then(response => {
				this.statusOptions = response.data;
			});
			this.getDicts("sys_plan_type").then(response => {
				this.typeOptions = response.data;
			});

			this.getDicts("sys_create_type").then(response => {
				this.createByOptions = response.data;
			});
		},
		methods: {
			/** 查询运营计划列表 */
			getList() {
				this.loading = true;
        listPlan(this.queryParams).then(response => {
					this.tableData = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},

			getSelectChannels() {
				getChannels().then(response => {
					this.channelOptions = response.data;
					this.channelValue = response.data[0].id;
				});
			},
			getChannelsTemplate() {
				var param = {};
				getChannTemplates(param).then(response => {
					console.log(response.data);
					this.templateOptions = response.data;
					this.templateTotal = this.templateOptions.length;
					console.log('2222222222222222222');
				});
			},
			getCurrentMonthDays() {
				this.currentDays = [];
				var date = new Date()
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				const lastDay = new Date(year, month, 0).getDate()
				for (let i = 1; i <= lastDay; i++) {
					this.currentDays.push(i + '号');
				}
			},

			getUserSelectTags() {
				getUserTags().then(response => {
					this.userList = response.data;
					this.userTotal = this.userList.length;
				});
			},

			handleChoosenTriggerType(index) {
				this.triggerTypeIndex = index
			},

			// 状态字典翻译
			statusFormat(row, column) {
				return this.selectDictLabel(this.statusOptions, row.status);
			},
			// 类型字典翻译
			typeFormat(row, column) {
				return this.selectDictLabel(this.typeOptions, row.type);
			},

			channelFormat(row, column) {
				var channelName = '';
				for (var i = 0; i < this.channelOptions.length; i++) {
					if (this.channelOptions[i].id == row.channel) {
						channelName = this.channelOptions[i].name;
						break;
					}
				}
				return channelName;
			},
			touchTypeFormat(row, column) {
				var channelName = '';
				var type = row.touchType;
				if (type == 1) {
					channelName = '定时型 - 单次';
				} else if (type == 2) {
					channelName = '定时型 - 重复';
				}
				return channelName;
			},
			// 创建人字典翻译
			createByFormat(row, column) {
				return this.selectDictLabel(this.createByOptions, row.createBy);
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					id: undefined,
					name: undefined,
					status: undefined,
					beginDate: undefined,
					endDate: undefined,
					type: undefined,
					channel: undefined,
					latest: undefined,
					completePercent: undefined,
					allPercent: undefined,
					createBy: undefined,
					createTime: undefined
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id)
				this.single = selection.length != 1
				this.multiple = !selection.length
			},
			userHandleSelectionChange(selection) {
				this.userIds = selection.map(item => item.id)
				this.single = selection.length != 1
				this.multiple = !selection.length
				this.selectLength = this.userIds.length;
			},
			/** 新增按钮操作 */
			// handleAdd() {
			// 	this.reset();
			// 	this.open = true;
			// 	this.title = "运营计划";
			// },
			handleAdd(index) {
				this.chooseTriggerTypeVisible = false
				this.createPlanVisible = true
				this.$nextTick(() =>{
					this.$refs['createPlan'].dialogVisible = true
				})
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const id = row.id || this.ids
				getPlan(id).then(response => {
					this.form = response.data;
					this.open = true;
					this.title = "修改运营计划";
				});
			},
			/** 提交按钮 */
			submitForm: function() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.form.id != undefined) {
							updatePlan(this.form).then(response => {
								if (response.code === 200) {
									this.msgSuccess("修改成功");
									this.open = false;
									this.getList();
								} else {
									this.msgError(response.msg);
								}
							});
						} else {
							var array = new Array();
							for (let i = 0; i < this.ruleTypes1.length; i++) {
								var person = {
									eventType: this.ruleTypes1[i],
									eventKey: this.ruleTypes2[i],
									eventExpression: this.ruleTypes3[i],
									eventValue: this.ruleTypes4[i],
									eventRangeValue1: this.ruleTypes5[i],
									eventRangeValue2: this.ruleTypes6[i]
								}
								array.push(person);
							}
							console.log(array);
							this.form.ruleContent = JSON.stringify(array);
							this.form.touchType = this.typeValue;
							this.form.personTags = this.userTagsId;
							this.form.personType = this.userTypeValue;
							this.form.channel = this.channelValue;
							console.log(this.form.touchDateValue);
							addPlan(this.form).then(response => {
								if (response.code === 200) {
									this.msgSuccess("新增成功");
									this.open = false;
									this.getList();
								} else {
									this.msgError(response.msg);
								}
							});
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$confirm('是否确认删除运营计划编号为"' + ids + '"的数据项?', "警告", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(function() {
					return delPlan(ids);
				}).then(() => {
					this.getList();
					this.msgSuccess("删除成功");
				}).catch(function() {});
			},
			/** 导出按钮操作 */
			handleExport() {
				const queryParams = this.queryParams;
				this.$confirm('是否确认导出所有运营计划数据项?', "警告", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(function() {
					return exportPlan(queryParams);
				}).then(response => {
					this.download(response.msg);
				}).catch(function() {});
			},
			next() {
				if (this.active > 2) {
					this.finshStatus = 'finish ';
					//this.active = 0;
					return;
				}
				this.active++;
			},

			prev() {
				if (this.active > 0) {
					this.active--;
				}
			},
			selectCustType(obj) {
				this.getUserSelectTags();
			},
			handleSelectAll() {
				this.userList.forEach(row => {
					this.$refs.userTable.toggleAllSelection();
				});
			},
			handleRemoveAll() {
				this.$refs.userTable.clearSelection();
			},

			selectPersonRule() {
				this.dialogVisible = false;
				this.form.personTags = this.userIds.join(',');
			},

			addRule() {
				this.ruleTypes1.push(this.ruleTypes1[this.ruleTypes1.length - 1]);
				this.ruleTypes2.push(this.ruleTypes2[this.ruleTypes2.length - 1]);
				this.ruleTypes3.push(this.ruleTypes3[this.ruleTypes3.length - 1]);
				this.ruleTypes4.push(this.ruleTypes4[this.ruleTypes4.length - 1]);
				this.ruleTypes5.push(this.ruleTypes5[this.ruleTypes5.length - 1]);
				this.ruleTypes6.push(this.ruleTypes6[this.ruleTypes6.length - 1]);
			},

			removeRule() {
				this.ruleTypes1.splice(this.ruleTypes1.length - 1, 1);
				this.ruleTypes2.splice(this.ruleTypes2.length - 1, 1);
				this.ruleTypes3.splice(this.ruleTypes3.length - 1, 1);
				this.ruleTypes4.splice(this.ruleTypes4.length - 1, 1);
				this.ruleTypes5.splice(this.ruleTypes5.length - 1, 1);
				this.ruleTypes6.splice(this.ruleTypes6.length - 1, 1);
			},

			handleRadioChanges() {

			},

			handleChannelChanges(v) {
				this.channelValue = v;
			},
			getTemplateRow(index, row) {
				this.templateRadio = row.id;
				this.userTagsId = row.id;
			}
		}

	};
</script>
<style lang="scss">
	div,
	p {
		padding: 0;
		margin: 0;
	}

	.page-operation {
		background-color: #F7F9FA;
		height: calc(100vh - 84px);
		width: 100%;
		padding: 0 20px;
		overflow-y: scroll;

		.header-line {
			display: flex;
			justify-content: space-between;
		}

		.line1 {
			box-sizing: border-box;
			padding: 20px 0;

			.page-title {
				font-weight: 600;
				font-size: 24px;
				line-height: 34px;
				color: #1f2d3d;
			}

			.page-view-button {
				font-size: 20px;
				color: #99A9BF;
			}
		}

		.line2 {
			height: 30px;
			color: #8492a6;

			.select-box {
				display: flex;
				align-items: center;

				&>span {
					display: inline-block;
					margin-right: 8px;
				}

				.el-checkbox__input.is-checked+.el-checkbox__label {
					color: #475669;
				}

				.el-checkbox {
					box-shadow: 0 1px 5px 0 rgb(192 204 218 / 24%);
					border-radius: 14px;
					padding: 5px 16px;
					background-color: #ffffff;
					color: #475669;
					margin-right: 8px;
				}
			}

			.select-box-selector {
				display: flex;

				.selector-title {
					margin-right: 10px;
				}

				.selector--choose {
					width: 110px;
					margin-right: 18px;
				}
			}

			.search-bar {
				display: flex;

				&>.el-input {
					margin-right: 16px;
				}

				.create-btn {
					padding: 0 12px;
				}
			}
		}

		.bar-view {
			display: flex;
			// flex-wrap: nowrap;
			flex-flow: row nowrap;
			justify-content: flex-start;
			height: calc(100% - 92px);
			box-sizing: border-box;
			padding-top: 20px;
			margin: 0 -8px 0 -8px;
			overflow-x: auto;
			outline: none;

			.group-box {
				width: 308px;
				min-width: 308px;
				box-sizing: border-box;
				padding: 0 8px;
				height: calc(100% - 10px);
				border-radius: 3px;

				// overflow-y: scroll;
				.group {
					background-color: #E8ECF1;
					height: 100%;
					width: 100%;
					position: relative;
					box-sizing: border-box;
					padding: 8px;

					.group-header {
						height: 48px;
						padding: 14px 6px 10px;
						line-height: 24px;
						display: flex;
						justify-content: space-between;
						color: #1f2d3d;
					}

					.group-body {
						box-sizing: border-box;
						height: calc(100% - 98px);
						overflow-y: scroll;
					}

					.group-footer {
						position: absolute;
						width: calc(100% - 16px);
						bottom: 0;
						height: 30px;
						line-height: 30px;
						margin: 10px 0;
						cursor: pointer;
						color: #475669;
						font-size: 14px;
						box-sizing: border-box;
						padding-left: 6px;

						&:hover {
							background-color: #DCE0E6;
						}

						&>span:first-child {
							display: inline-block;
							height: 14px;
							width: 14px;
							border-radius: 50%;
							margin-right: 3px;
							color: #FFFFFF;
							background-color: #99A9BF;
							text-align: center;
							line-height: 14px;
							font-size: 4px;
						}
					}
				}
			}
		}

		.table-view {
			background-color: #FFFFFF;
			width: 100%;
			border-radius: 4px;
			margin-top: 15px;


			.selector-bigone {
				height: 120px;
				display: flex;

				.selector-item {
					width: 165px;
					box-sizing: border-box;
					padding: 20px 25px 25px 20px;

					.icon-title {
						display: flex;
						font-size: 13px;
						align-items: center;

						&>span {
							margin-left: 4px;
						}
					}

					.selector-count {
						font-size: 36px;
						height: 54px;
						line-height: 54px;
					}
				}

				.active {
					border-top: 3px solid #F5B126;
				}
			}

			.table {
				box-sizing: border-box;
				padding: 0 20px;
			}
		}

		.triggerTypeBox {
			.el-dialog__header {
				display: none;
			}

			.el-dialog__body {
				padding: 0;
			}

			.triggerBody {
				box-sizing: border-box;
				padding: 16px 32px;
				width: 100%;

				.submenu {
					width: 100%;

					.submenu-title {
						padding: 16px 0;
						color: #475669;
						font-size: 16px;
					}

					.menu-items {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						margin: 16px 0;

						.menu-item {
							padding: 0 12px;
							margin-bottom: 12px;
							width: 276px;
							height: 72px;
							box-sizing: border-box;
							border: 1px solid #e0e6ed;
							border-radius: 3px;
							display: flex;
							justify-content: space-between;
							align-items: center;
							position: relative;
							cursor: pointer;

							&:hover{
								border-color: #00bf8a;
							}

							.main-trigger{
								display: flex;
								align-items: center;
								color: #5e6d82;
								font-weight: 500;
								i{
									font-size: 40px;
									vertical-align: middle;
								}
								span{
									margin-left: 5px;
								}
								div{
									margin-left: 5px;
									p:last-child{
										margin-top: 3px;
										color: #8492a6;
										font-size: 12px;
									}
								}
							}
							a{
								color: #307ef2;
							}
						}

						.active{
							border-color: #00bf8a;
							background-color: #f1fcfc;
							i{
								color: #00bf8a;
							}
						}
					}
				}
			}
		}

	}
</style>
